<template>
  <!-- Tabs切换区域 -->
  <view class="hb-bg-[#F7F8FA] hb-z-10 hb-px-4 hb-rounded-tl-2xl hb-rounded-tr-2xl">
    <view class="hb-flex hb-items-center hb-pt-4 hb-mb-4 hb-gap-4">
      <template v-for="(v, i) in tabs" :key="i">
        <view
          class="hb-text-sm hb-relative"
          :class="activeTab === i && ['hb-font-bold', 'hb-text-base', 'hb-text-[#333]']"
          :style="{ color: `${activeTab === i ? '#333' : '#646566'}` }"
          @click="handleTabClick(i)"
        >
          <text class="hb-relative hb-z-10">{{ v }}</text>
          <view
            :style="{
              width: `${activeTab === i ? '100%' : '0%'}`,
              transition: 'width 0.3s ease-in-out',
            }"
            class="hb-h-1.5 hb-bg-primary hb-absolute hb-bottom-0.5 hb-left-0"
          ></view>
        </view>
      </template>
    </view>
    <view class="hb-h-9 hb-m-auto hb-mb-4">
      <TSearch
        ref="searchRef"
        background-color="#fff"
        text="搜索"
        text-color="#969799"
        is-box-shadow
        @confirm="handleConfirm"
      ></TSearch>
    </view>
  </view>
  <swiper
    class="hb-w-full"
    :style="{ height: contentHeight + 'px' }"
    :current="activeTab"
    @change="onSwiperChange"
  >
    <swiper-item>
      <CommunityList :key-word="keyWord" />
    </swiper-item>
    <swiper-item>
      <FriendList :key-word="keyWord" />
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import CommunityList from './CommunityList.vue';
  import FriendList from './FriendList.vue';
  import TSearch from '@/components/TSearch/index.vue';

  const props = defineProps({
    headerHeight: propTypes.number.def(44),
  });

  const keyWord = ref<string>('');

  // 计算内容高度（动态计算）
  const contentHeight = computed(() => {
    const { windowHeight } = uni.getWindowInfo();
    const tabsHeight = uni.upx2px(218);
    const buttonHeight = uni.upx2px(204);

    return windowHeight - props.headerHeight - buttonHeight - tabsHeight - 75;
  });

  const searchRef = ref<InstanceType<typeof TSearch> | null>(null);
  const tabs = ref<string[]>(['我的圈子', '我的好友']);
  const activeTab = ref<number>(0);
  function handleTabClick(index: number) {
    // searchRef.value?.clearVal();
    activeTab.value = index;
  }

  // 仅处理swiper滑动
  function onSwiperChange(e: { detail: { current: number } }) {
    activeTab.value = e.detail.current;
  }

  /** 搜索 */
  function handleConfirm(val: string) {
    keyWord.value = val;
  }
</script>

<style scoped></style>
